﻿@page "/chart/percent-stacked-line"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-line-chart'>Blazor 100% Stacked Line Chart</a> example visualizes the family expense data with 100% stacked line series in the chart to identify who spent more money in each category. Data points are enhanced with marker and tooltip.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the 100% stacked line type chart. The 100% stacked line type chart displays multiple series of data as stacked lines, ensuring that the cumulative proportion of each stacked element always totals 100%. <code>Marker</code>is used to represent individual data and its value.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the 100% stacked line series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/stack-line'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Family Expense for Month" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Interval="1">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            <ChartAxisMinorGridLines Width="0"></ChartAxisMinorGridLines>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Title="Expense" Interval="20">
            <ChartAxisMajorGridLines Width="1"></ChartAxisMajorGridLines>
            <ChartAxisMinorGridLines Width="1"></ChartAxisMinorGridLines>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
        </ChartPrimaryYAxis>
        <ChartTooltipSettings Enable="true" Format="${point.x} : <b>${point.y} (${point.percentage}%)</b>"></ChartTooltipSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" Name="John" XName="ExpensesCategory" Width="2" DashArray="5,1"
                         Opacity="1" YName="JohnExpenses" Type="ChartSeriesType.StackingLine100">
                <ChartMarker Visible="true">
                </ChartMarker>
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="Peter" XName="ExpensesCategory" Width="2" DashArray="5,1"
                         Opacity="1" YName="PeterExpenses" Type="ChartSeriesType.StackingLine100">
                <ChartMarker Visible="true">
                </ChartMarker>
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="Steve" XName="ExpensesCategory" Width="2" DashArray="5,1"
                         Opacity="1" YName="SteveExpenses" Type="ChartSeriesType.StackingLine100">
                <ChartMarker Visible="true">
                </ChartMarker>
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="Charle" XName="ExpensesCategory" Width="2" DashArray="5,1"
                         Opacity="1" YName="CharleExpenses" Type="ChartSeriesType.StackingLine100">
                <ChartMarker Visible="true">
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<StackedChartData> ChartPoints { get; set; } = new List<StackedChartData>
    {
        new StackedChartData { ExpensesCategory = "Food" , JohnExpenses = 90, PeterExpenses = 40 , SteveExpenses = 70, CharleExpenses = 120},
        new StackedChartData { ExpensesCategory = "Transport", JohnExpenses = 80, PeterExpenses = 90, SteveExpenses = 110, CharleExpenses = 70 },
        new StackedChartData { ExpensesCategory = "Medical",JohnExpenses = 50, PeterExpenses = 80, SteveExpenses = 120, CharleExpenses = 50 },
        new StackedChartData { ExpensesCategory = "Clothes",JohnExpenses= 70, PeterExpenses = 30, SteveExpenses = 60, CharleExpenses = 180 },
        new StackedChartData { ExpensesCategory = "Personal Care", JohnExpenses = 30, PeterExpenses = 80, SteveExpenses = 80, CharleExpenses = 30 },
        new StackedChartData { ExpensesCategory = "Books", JohnExpenses = 10, PeterExpenses = 40, SteveExpenses = 30, CharleExpenses = 270},
        new StackedChartData { ExpensesCategory = "Fitness",JohnExpenses = 100, PeterExpenses = 30, SteveExpenses = 70, CharleExpenses = 40 },
        new StackedChartData { ExpensesCategory = "Electricity", JohnExpenses = 55, PeterExpenses = 95, SteveExpenses = 55, CharleExpenses = 75},
        new StackedChartData { ExpensesCategory = "Tax", JohnExpenses = 20, PeterExpenses = 50, SteveExpenses = 40, CharleExpenses = 65 },
        new StackedChartData { ExpensesCategory = "Pet Care", JohnExpenses = 40, PeterExpenses = 20, SteveExpenses = 80, CharleExpenses = 95 },
        new StackedChartData { ExpensesCategory = "Education", JohnExpenses = 45, PeterExpenses = 15, SteveExpenses = 45, CharleExpenses = 195 },
        new StackedChartData { ExpensesCategory = "Entertainment", JohnExpenses = 75, PeterExpenses = 45, SteveExpenses = 65, CharleExpenses = 115 }
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class StackedChartData
    {
        public string ExpensesCategory { get; set; }
        public double JohnExpenses { get; set; }
        public double PeterExpenses { get; set; }
        public double SteveExpenses { get; set; }
        public double CharleExpenses { get; set; }
    }
}
